<template>
    <div>
        <!-- 顶部 -->
        <div>
            <van-nav-bar
                title="娱乐中心"
                @click-left="onClickLeft"
                @click-right="onClickRight"
            />

        </div>


        <div class="happy">
            <router-link to="/constell" tag="div">
            <div class="happysmall">
                <div class="happyBox">
                    <div class="happyImg">
                        <img src="../assets/xingzuo.jpg" alt="">
                    </div>
                    <div class="happyItem">
                        <span>星座配对</span>
                        <p>来看看你的最配星座</p>
                    </div>
                </div>
            </div>
            </router-link>
            <router-link to="/joke" tag="div">
                <div class="happysmall">
                <div class="happyBox">
                    <div class="happyImg">
                        <img src="../assets/yule.jpg" alt="">
                    </div>
                    <div class="happyItem">
                        <span>笑话大全</span>
                        <p>每天能都要保持好心情</p>
                    </div>
                </div>
            </div>
            </router-link>
            <router-link to="/guess" tag="div">
            <div class="happysmall">
                <div class="happyBox">
                    <div class="happyImg">
                        <img src="../assets/dengmi.jpg" alt="">
                    </div>
                    <div class="happyItem">
                        <span>猜灯谜</span>
                        <p>看看你能猜对几个</p>
                    </div>
                </div>
            </div>
            </router-link>
        </div>
        
        <indexFooter></indexFooter>
    </div>
</template>
<script>
// import { component } from 'vue/types/umd'
import indexFooter from "../components/IndexFooter";

// import { defineComponent } from '@vue/composition-api'

export default {
    name:"entertainment",
    components:{
        indexFooter,
    },
     methods: {
    // 返回
        onClickLeft() {
            // this.$router.back;
            window.history.go(-1);
        },
        onClickRight() {
            ('按钮');
        },
    },
}
</script>
<style scoped lang="less">
/deep/.van-search__action:active {
    background-color: #cc0000 !important;
}
.happyImg>img {
    width: 100%;
    height: 100%;
    border-radius: 12%;
}
// 顶部
/deep/.van-nav-bar__content {
    background-color: #cc0000;
}
/deep/.van-nav-bar .van-icon{
    color: #fff;
}
/deep/.van-nav-bar__text {
    color: #fff;
}
/deep/.van-nav-bar__title {
    color: #fff;
}
/deep/.van-button--info {
    background-color: #cc0000;
    border: 1px solid #cc0000;
}
.happysmall {
    margin-bottom: 0;
    /* float: left; */
    /* overflow: hidden; */
    clear: both;
    width: 100%;
    height: 90px;
    background-color: #eee;
    border-radius: 6px;

    padding: 0 4%;
}
.happy {
    /* margin: auto; */
    margin: 12% 7%;
    width: 80%;
    height: 64px;
    
}
.happyBox {
    margin: auto;
    margin-top: 7%;
    width: 100%;
    height: 64px;
    /* background-color: rgb(54, 45, 47); */
    /* overflow: hidden; */

}
.happyImg {
    margin-top: 4%;
    float: left;
    /* margin-bottom: 10px; */
    border-radius: 6%;
    width: 22%;
    height: 100%;
    // background-color: red;
}
.happyItem {
    margin-top: 4%;
    float: right;
    width: 74%;
    height: 100%;
    /* background-color: red; */
}
.happyItem>span {
    font-weight: 550;
    font-size: 18px;
}
.happyItem>p {
    /* font-weight: 550; */
    font-size: 14px;
    color: #666;
}
</style>
